<template>
	<div @longpress="long">
		<!-- 时间显示 -->
		<view v-if="showTime" 
		class="flex align-center justify-center pb-4 pt-2">
			<text class="font-sm text-light-muted">{{showTime}}</text>
		</view>
		<!-- 气泡 -->
		<view class="flex align-start mb-3"
		:class="isother ? 'justify-start' : 'justify-end'" >
			<!-- 好友 -->
			<template v-if="isother" style="position: absolute;left: 0;">
				<free-avater size="70" :src="avatar"
				clickType="navigate" :token="item.from_id"></free-avater>
			</template>
		
			<div class=" rounded" :class="labelClass" style="max-width:500rpx;">
		
				<!-- 文字 -->
				
				<text v-if="item.msg_type === '0'" class="font-md">{{item.msg_body}}</text>
				
				<!--  图片-->							
				<free-image  v-else-if="item.msg_type === '1'" :src="item.msg_body+'?x-oss-process=image/auto-orient,1'" @click="preview(item.msg_body+'?x-oss-process=image/auto-orient,1')" imageClass="rounded" :maxWidth="500" :maxHeight="350"></free-image>

				<!-- 音频 -->
				<view v-else-if="item.msg_type === '2'" 
				class="flex align-center"
				@click="openAudio">
					<image v-if="!isother" :src=" !audioPlaying ? '/static/audio/audio3.png' : '/static/audio/play.gif'" 
					style="width: 50rpx;height: 50rpx;" 
					class="mx-1"></image>
					<text class="font">{{item.extra.time + '"'}}</text>
					<image v-if="isother" :src=" !audioPlaying ? '/static/audio/audio3.png' : '/static/audio/play.gif'"
					style="width: 50rpx;height: 50rpx;" 
					class="mx-1"></image>
				</view>
				
				<!-- 视频 -->
				<view v-else-if="item.msg_type === '3'"
				class="position-relative rounded"
				@click="openVideo">
					<free-image :src="getVideoImg" imageClass="rounded" :maxWidth="300" :maxHeight="350" @load="loadPoster"></free-image>
					<text class="iconfont text-white position-absolute" style="font-size: 80rpx;width: 80rpx;height: 80rpx;" :style="posterIconStyle">&#xe61d;</text>
				</view>	
				
				<!-- 表情 -->
				<!-- <free-image  v-else-if="item.msg_type === '4'" :src="item.msg_body" @click="preview(item.msg_body)" imageClass="rounded" :maxWidth="500" :maxHeight="350"></free-image> -->
				<image  v-else-if="item.msg_type === '4'"  :src="item.msg_body" style="width: 150rpx;height: 150rpx;"></free-image>
							
			</div>
			
			<!-- 本人 -->
			<template>
				<free-avater size="70" :show="!isother" :token="item.from_id" :src="myAvatar||'/static/img/avatar.jpg'"
					clickType="navigate"></free-avater>
			</template>
	
		</view>
		
	</div>
</template>

<script>
	import freeAvater from "@/components/free-ui/free-avater.vue"
	import freeImage from './free-image.vue';
	import $T from "@/common/free-lib/time.js"
	
	import { mapState,mapActions } from 'vuex'
	import _config from "@/config/index.js"
	
	var _this;
	export default {
		components: {
			freeAvater,
			freeImage
		},
		props: {
			item: Object,
			index:Number,
			// 上一条消息的时间戳
			pretime:[Number,String],
			avatar:String,
			myAvatar:String,
			myUsername:String
		},
		data() {
			return {
				innerAudioContext:null,
				audioPlaying:false,
				// 默认封面的宽高
				poster:{
					w:100,
					h:100
				}
			}
		},
		computed: {
			// 短视频封面图标位置
			posterIconStyle(){
				let w = this.poster.w/2 - uni.upx2px(80)/2
				let h = this.poster.h/2- uni.upx2px(80)/2
				return `left:${w}px;top:${h}px;`
			},
			// 是否是他人
			isother() {
				// 获取他人id
				return this.item.from_id !== this.myUsername
			},
			// 显示的时间
			showTime(){
				return $T.getChatTime(this.item.create_time,this.pretime)
			},
			// 是否需要气泡样式
			hasLabelClass(){
				if(this.item.msg_type=="1"||this.item.msg_type=="3"||this.item.msg_type=="4"){
					return false;
				}else{
					return true;
				}
			}, 
			// 气泡的样式
			labelClass(){
				if(this.hasLabelClass){
					return this.isother ? 'p-2 bg-white ml-3' : 'p-2 bg-chat-item mr-3';
				}else{
					return this.isother ? 'ml-3' : 'mr-3';
				}
			},
			//获取视频封面
			getVideoImg(){
				var url = this.item.msg_body
				if(url.indexOf('_doc')!=-1){
					url = uni.getStorageSync(url+'Url');
				}
				return url.substring(0,url.lastIndexOf('.'))+'44.jpg'
			}
			
		},
		mounted() {
			_this=this;
			// 注册全局事件
			if (this.item.msg_type=="2") {
				this.audioOn(this.onPlayAudio)
			}
			setTimeout(function(){
				_this.show=true
			},200)
		},
		// 组件销毁
		destroyed() {

			if (this.item.msg_type=="2") {
				this.audioOff(this.onPlayAudio)
			}
			// 销毁音频
			if (this.innerAudioContext) {
				this.innerAudioContext.destroy()
				this.innerAudioContext = null
			}
		},
		methods:{
			...mapActions(['audioOn','audioEmit','audioOff']),
			// 加载封面
			loadPoster(e){
				this.poster.w = e.w
				this.poster.h = e.h
			},
			// 打开视频
			openVideo(){
				uni.navigateTo({
					url: '/pages/message/video?url='+this.item.msg_body
				});
			},
			// 监听播放音频全局事件
			onPlayAudio(create_time){
				if (this.innerAudioContext) {
					if (this.create_time !== create_time) {
						this.innerAudioContext.pause()
					}
				}
			},
			// 播放音频
			openAudio(){
				// 通知停止其他音频
				this.audioEmit(this.create_time)
				if (!this.innerAudioContext) {
					this.innerAudioContext = uni.createInnerAudioContext();
					this.innerAudioContext.src =  this.item.msg_body;
					this.innerAudioContext.play()
					// 监听播放
					this.innerAudioContext.onPlay(()=>{
						this.audioPlaying = true
					})
					// 监听暂停
					this.innerAudioContext.onPause(()=>{
						this.audioPlaying = false
					})
					// 监听停止
					this.innerAudioContext.onStop(()=>{
						this.audioPlaying = false
					})
					// 监听错误
					this.innerAudioContext.onError(()=>{
						this.audioPlaying = false
					})
				} else {
					this.innerAudioContext.stop()
					this.innerAudioContext.play()
				}
			},
			// 预览图片
			preview(url){
				this.$emit('preview',url)
			},
			// 长按事件
			long(e){
				let x = 0
				let y = 0
				// #ifdef APP-PLUS-NVUE
				if (Array.isArray(e.changedTouches) && e.changedTouches.length > 0) {
					x = e.changedTouches[0].screenX
					y = e.changedTouches[0].screenY
				}
				// #endif
				// #ifdef MP
				x = e.detail.x
				y = e.detail.y
				// #endif
				this.$emit('long',{
					x,
					y,
					index:this.index
				})
			}
		}
	}
</script>

<style scoped>
	.chat-left-icon{
		left: 80rpx;top: 20rpx;
	}
	.chat-right-icon{
		right: 80rpx;
		top: 20rpx;
	}
	.chat-animate{
		/* #ifndef APP-PLUS-NVUE */
		opacity: 0;
		/* #endif */
	}
</style>
